import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';
import { Icon } from 'antd';
import globalStyles from '../../style/common.less';

const modalRoot = document.getElementById('dialog-root');

class EnvironmentGreenMiddleChart extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('EnvironmentGreenMiddleChart');
    this.state = {
      chartOption: undefined,
      chartHeight: 280,
    };
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
    echarts.registerTheme('theme_name', darkEchartsTheme);
    this.setChartData();
  }

  setChartData() {

    var maxData = 100;
    const option = {
      tooltip: {},
      grid: {
        top: 0,
        height: 240,
        left: 60,
        right: 60
      },
      xAxis: {
        max: maxData,
        splitLine: {
          show: false
        },
        offset: 10,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        }
      },
      yAxis: {
        data: ['铜陵', '湖州', '丽水', '黄山', '嘉兴'],
        inverse: true,
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            color: '#fff',
            fontSize: 16
          }
        }
      },
      series: [{ // 外边框
        name: '',
        type: 'pictorialBar',
        symbol: 'reat',
        //barWidth: '10%',
        symbolOffset: ['-1%', 0], //位置
        symbolSize: ['102%', 24],
        itemStyle: {
          normal: {
            color: 'rgba(54,215,182,0.27)'
          }
        },
        z: -180, //图层
        symbolRepeat: null,
        symbolBoundingData: maxData,
        data: [48.7, 48.4, 47.0, 47.0,45.1],
        animationEasing: 'elasticOut',
      },
      { // 内边框
        name: '',
        type: 'pictorialBar',
        symbol: 'reat',
        //barWidth: '9%',
        //barMaxWidth: '20%',
        symbolOffset: ['-0.5%', 0],
        symbolSize: ['101%', 22],
        itemStyle: {
          normal: {
            color: 'black'
          }
        },
        z: -20,
        symbolRepeat: null,
        symbolBoundingData: maxData,
        data: [48.7, 48.4, 47.0, 47.0,45.1],
        animationEasing: 'elasticOut',
      },
      {
        // current data
        type: 'pictorialBar',
        symbol: 'rect',
        itemStyle: {
          normal: {
            barBorderRadius: 5,
            color: '#36d7b6'
          }
        },
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbolClip: true,
        symbolSize: 20,
        symbolBoundingData: maxData,
        data: [48.7, 48.4, 47.0, 47.0,45.1],
        z: 99999999,
        animationEasing: 'elasticOut',
        animationDelay: function (dataIndex, params) {
          return params.index * 30;
        }
      }, {
        // full data
        type: 'pictorialBar',
        itemStyle: {
          normal: {
            color: 'rgba(54,215,182,0.27)'
          }
        },
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              return (params.value + '%');
            },
            position: 'right',
            offset: [10, 0],
            textStyle: {
              color: '',
              fontSize: 16
            }
          }
        },
        animationDuration: 0,
        symbolRepeat: 'fixed',
        symbolMargin: '5%',
        symbol: 'rect',
        symbolSize: 20,
        symbolBoundingData: maxData,
        data: [48.7, 48.4, 47.0, 47.0,45.1],
        z: 99999,
        animationEasing: 'elasticOut',
        animationDelay: function (dataIndex, params) {
          return params.index * 30;
        }
      }
      ]
    };
    this.setState({ chartOption: option });
  }

  render() {
    const { style, width, height } = this.props;
    const dtTitle = `城市建成区绿化覆盖率排行（2018年）TOP5`;
    const { chartOption } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15 }}><div style={{ float: 'left', width: 5, height: 35, marginRight: 10, backgroundColor: 'rgba(63,177,277,1)', }} />{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}

export default EnvironmentGreenMiddleChart;
